<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <button id="getBtn">Get AJAX</button>
    <button id="postBtn">Post AJAX</button>
    <button id="putBtn">Put AJAX</button>
    <button id="deleteBtn">Delete AJAX</button>
    <script>
        const getBtn = document.getElementById("getbtn")
        const postBtn = docuemnt.getElementById("postbtn")
        const putBtn = document.getElementById("putbtn")
        const deleteBtn = document.getElementById("deletebtn")


        getBtn.onlick = () => {
            const xhr = new XMLhttpRequest()
            xhr.open("GET", "http://localhost:8081/")
            xhr.send()
        }


        putBtn.onclick = () => {
            const xhr = new XMLHttpRequest()
            xhr.open("put", "http://localhost:8081/server/4?name=tom3&age=13")
            xhr.setRequestHeader("Content-Type","application/json;charset=utf-8")
        }



    </script>
</body>
</html>